<template>
  <div class="app-container" style="margin-top: 40px">
    <el-form
      ref="postForm"
      v-loading="listLoading"
      :model="form"
      :rules="rules"
      class="form-container"
    >
      <div class="createPost-main-container">
        <el-form-item label-width="90px" label="" prop="buyer_commission">
          <span>买家交易佣金</span>
          <el-input
            v-model="form.buyer_commission"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>%</span>
        </el-form-item>
        <el-form-item label-width="90px" label="" prop="margin_ratio">
          <span>保证金比例</span>
          <el-input
            v-model="form.margin_ratio"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>%</span>
        </el-form-item>
        <el-form-item label-width="90px" label="" prop="shop_commission">
          <span>企业店铺销售佣金</span>
          <el-input
            v-model="form.shop_commission"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          />
          <span>%</span><span
            style="margin-left: 40px; color: #999"
          >仅商家上传商品首次成交，收取销售佣金</span>
        </el-form-item>

        <!-- 补充 -->
        <el-form-item
          label-width="90px"
          label=""
          prop="distribution_shop_commission"
        >
          <span>续拍交易服务费</span>
          <el-input
            v-model="form.distribution_shop_commission"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>%</span>
          <span
            style="margin-left: 40px; color: #999"
          >分销店铺（服务费）佣金</span>
        </el-form-item>

        <el-form-item label-width="90px" label="" prop="order_closing_time">
          <span>订单超过</span>
          <el-input
            v-model="form.order_closing_time"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>分钟，自动关闭</span>
        </el-form-item>
        <el-form-item label-width="90px" label="" prop="order_deliver_time">
          <span>订单发货后</span>
          <el-input
            v-model="form.order_deliver_time"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>天，自动确认收货</span>
        </el-form-item>
        <el-form-item label-width="90px" label="" prop="refund_time">
          <span>确认收货</span>
          <el-input
            v-model="form.refund_time"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>天内，可申请退款</span>
        </el-form-item>
        <el-form-item label-width="90px" label="" prop="agree_refund_time">
          <span>退款退货申请，超过</span>
          <el-input
            v-model="form.agree_refund_time"
            type="number"
            class="input-spin"
            style="width: 200px; margin: 0 10px"
          /><span>天未处理，默认同意</span>
        </el-form-item>
        <!-- 补充 -->
        <el-form-item label-width="90px" label="" prop="first_commission">
          <span>分销佣金一级</span>
          <el-input
            v-model="form.first_commission"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>%</span>
        </el-form-item>
        <el-form-item label-width="90px" label="" prop="second_commission">
          <span>分销佣金二级</span>
          <el-input
            v-model="form.second_commission"
            class="input-spin"
            type="number"
            style="width: 200px; margin: 0 10px"
          /><span>%</span>
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align: center; margin-top: 30px; margin-bottom: 30px">
      <el-button
        waves
        type="primary"
        :loading="submitLoading"
        @click="updateData()"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { getSetting, updateSetting } from '@/api/common'

export default {
  name: 'SettingBasics',
  data() {
    return {
      submitLoading: false,
      listLoading: true,
      form: {},
      rules: {
        buyer_commission: [
          {
            required: true,
            message: '请输入买家交易佣金',
            trigger: 'blur'
          }
        ],
        shop_commission: [
          {
            required: true,
            message: '请输入企业店铺销售佣金',
            trigger: 'blur'
          }
        ],
        distribution_shop_commission: [
          {
            required: true,
            message: '请输入续拍商品服务费',
            trigger: 'blur'
          }
        ],
        order_closing_time: [
          {
            required: true,
            message: '请输入订单超时关闭时间',
            trigger: 'blur'
          }
        ],
        order_deliver_time: [
          {
            required: true,
            message: '请输入订单发货确认周期',
            trigger: 'blur'
          }
        ],
        refund_time: [
          {
            required: true,
            message: '请输入收货后可售后的周期',
            trigger: 'blur'
          }
        ],
        agree_refund_time: [
          {
            required: true,
            message: '请输入默认同意售后的周期',
            trigger: 'blur'
          }
        ],
        first_commission: [
          {
            required: true,
            message: '请输入分销一级佣金',
            trigger: 'blur'
          }
        ],
        second_commission: [
          {
            required: true,
            message: '请输入分销二级佣金',
            trigger: 'blur'
          }
        ],
        margin_ratio: [
          {
            required: true,
            message: '请输入保证金比例',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getSetting()
        .then((response) => {
          this.form = response.data
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    updateData() {
      this.$refs.postForm.validate(async(valid) => {
        if (valid) {
          const form = this.form
          const params = {
            buyer_commission: form.buyer_commission.toString(),
            shop_commission: form.shop_commission.toString(),
            order_closing_time: form.order_closing_time.toString(),
            order_deliver_time: form.order_deliver_time.toString(),
            refund_time: form.refund_time.toString(),
            agree_refund_time: form.agree_refund_time.toString(),
            distribution_shop_commission:
              form.distribution_shop_commission.toString(),
            first_commission: form.first_commission.toString(),
            second_commission: form.second_commission.toString(),
            margin_ratio: form.margin_ratio.toString()
          }
          this.submitLoading = true
          updateSetting(this.form.id, params)
            .then(() => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000
              })
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })
    }
  }
}
</script>
